<!--
 * @Author: your name
 * @Date: 2020-06-05 21:34:00
 * @LastEditTime: 2021-04-06 18:47:19
 * @LastEditors: yuanpingfang
 * @Description: In User Settings Edit
 * @FilePath: \vue-shop\src\components\HelloWorld.vue
-->
<template>
  <div class="app-container">
    <el-form ref="spuForm" :rules="rules" :model="form" label-width="150px">
      <el-row>
        <el-col :span="12">
          <!-- 基本信息 -->
          <el-card class="box-card">
            <div slot="header">
              <span>基本信息</span>
            </div>

            <el-form-item label="表名称" prop="tableName">
              <el-input clearable
                v-model="form.tableName"
                placeholder="用于生成mapper的sql语句,数据库英文表名"
                @change="tabel2Camel()"
              />
            </el-form-item>

            <el-form-item label="表描述" prop="tableComment">
              <el-input clearable v-model="form.tableComment" placeholder="表中文描述" />
            </el-form-item>

            <el-form-item label="实体类名称" prop="className">
              <el-input clearable
                v-model="form.className"
                placeholder="domain实体英文名称,首字母大写"
              />
            </el-form-item>

            <el-form-item label="作者" prop="functionAuthor">
              <el-input clearable v-model="form.functionAuthor" />
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              
              <el-input type="textarea" :rows="4" clearable v-model="form.remark" />
            </el-form-item>
          </el-card>
        </el-col>
        <el-col :span="12">
          <!-- 生成信息 -->
          <el-card class="box-card">
            <div slot="header">
              <span>生成信息</span>
            </div>
            <el-form-item label="生成模板" prop="tplCategory">
              <el-select v-model="form.tplCategory">
                <el-option label="单表（增删改查）" value="crud" />
                <el-option label="树表（增删改查）" value="tree" />
              </el-select>
            </el-form-item>

            <el-form-item label="生成包路径" prop="packageName">
              <span slot="label">
                生成包路径
                <el-tooltip
                  content="生成在哪个java包下，例如 com.ruoyi.system"
                  placement="top"
                >
                  <i class="el-icon-question"></i>
                </el-tooltip>
              </span>
              <el-input clearable
                v-model="form.packageName"
                placeholder="com.ruoyi.system"
              />
            </el-form-item>

            <el-form-item label="生成模块名" prop="moduleName">
              <span slot="label">
                生成模块名
                <el-tooltip
                  content="可理解为子系统名，例如 system"
                  placement="top"
                >
                  <i class="el-icon-question"></i>
                </el-tooltip>
              </span>
              <el-input clearable v-model="form.moduleName" placeholder="system" />
            </el-form-item>

            <el-form-item label="生成业务名" prop="businessName">
              <span slot="label">
                生成业务名
                <el-tooltip
                  content="可理解为功能英文名，例如 user"
                  placement="top"
                >
                  <i class="el-icon-question"></i>
                </el-tooltip>
              </span>
              <el-input clearable
                v-model="form.businessName"
                placeholder="功能英文名，例如 user"
              />
            </el-form-item>
            <el-form-item label="生成功能名" prop="functionName">
              <span slot="label">
                生成功能名
                <el-tooltip content="用作类描述，例如 用户管理" placement="top">
                  <i class="el-icon-question"></i>
                </el-tooltip>
              </span>
              <el-input clearable
                v-model="form.functionName"
                placeholder="用作类描述，例如 用户管理"
              />
            </el-form-item>
            <el-form-item label="上级菜单" prop="parentMenuId">
              <span slot="label">
                上级菜单
                <el-tooltip
                  content="分配到指定菜单下，例如 系统管理"
                  placement="top"
                >
                  <i class="el-icon-question"></i>
                </el-tooltip>
              </span>
              <treeselect
                :append-to-body="true"
                v-model="form.parentMenuId"
                :options="menus"
                :normalizer="normalizer"
                :show-count="true"
                placeholder="请选择系统菜单"
              />
            </el-form-item>
            <!-- <el-form-item label="生成代码方式" prop="genType">
              zip压缩包
            </el-form-item> -->
          </el-card>
        </el-col>
      </el-row>
    </el-form>
    <!-- 字段信息 -->
    <el-card class="box-card">
      <div slot="header">
        <span>字段信息</span>

        <div style="float: right">
        <el-button
          type="primary"
          size="mini"
          @click="dialogVisible = true"
          >json添加</el-button
        >
        <el-button
          type="primary"
          size="mini"
          @click="handleAddAttr"
          >单个添加</el-button
        >

        </div>
        
      </div>

      <el-form size="mini" ref="attrForm" :model="form" :inline="true">
        <el-table
          :data="form.columns"
          highlight-current-row
          border
          style="width: 100%"
        >
          <el-table-column property="columnName" label="库字段列名" width="140">
            <template slot-scope="scope">
              <el-form-item
                :prop="'columns[' + scope.$index + '].columnName'"
                :rules="rules.attr.columnName"
              >
                <el-input clearable
                  v-model="scope.row.columnName"
                  width="200px"
                ></el-input clearable>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column property="columnType" label="字段类型" width="140">
            <template slot-scope="scope">
              <el-form-item
                :prop="'columns[' + scope.$index + '].columnType'"
                :rules="rules.attr.columnType"
              >
                <el-input clearable v-model="scope.row.columnType"></el-input clearable>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column property="javaField" label="java字段" width="140">
            <template slot-scope="scope">
              <el-form-item
                :prop="'columns[' + scope.$index + '].javaField'"
                :rules="rules.attr.javaField"
              >
                <el-input clearable v-model="scope.row.javaField"></el-input clearable>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column
            property="columnComment"
            label="字段中文名"
            width="140"
          >
            <template slot-scope="scope">
              <el-form-item
                :prop="'columns[' + scope.$index + '].columnComment'"
                :rules="rules.attr.columnComment"
              >
                <el-input clearable v-model="scope.row.columnComment"></el-input clearable>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column property="javaType" label="Java字段类型" width="110">
            <template slot-scope="scope">
              <el-form-item
                :prop="'columns[' + scope.$index + '].javaType'"
                :rules="rules.attr.javaType"
              >
                <el-select v-model="scope.row.javaType">
                  <el-option label="String" value="String" />
                  <el-option label="Integer" value="Integer" />
                  <el-option label="Long" value="Long" />
                  <el-option label="Float" value="Float" />
                  <el-option label="Double" value="Double" />
                  <el-option label="BigDecimal" value="BigDecimal" />
                  <el-option label="Date" value="Date" />
                  <el-option label="Boolean" value="Boolean" />     
                  <el-option label="Object" value="Object" />
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column property="isPk" label="主键" width="50">
            <template slot-scope="scope">
              <el-form-item
                :prop="'columns[' + scope.$index + '].isPk'"
                :rules="rules.attr.isPk"
              >
                <el-checkbox
                  true-label="1"
                  v-model="scope.row.isPk"
                ></el-checkbox>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column property="isInsert" label="插入" width="50">
            <template slot-scope="scope">
              <el-form-item
                :prop="'columns[' + scope.$index + '].isInsert'"
                :rules="rules.attr.isInsert"
              >
                <el-checkbox
                  true-label="1"
                  v-model="scope.row.isInsert"
                ></el-checkbox>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column property="isEdit" label="编辑" width="50">
            <template slot-scope="scope">
              <el-form-item
                :prop="'columns[' + scope.$index + '].isEdit'"
                :rules="rules.attr.isEdit"
              >
                <el-checkbox
                  true-label="1"
                  v-model="scope.row.isEdit"
                ></el-checkbox>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column property="isList" label="列表" width="50">
            <template slot-scope="scope">
              <el-form-item
                :prop="'columns[' + scope.$index + '].isList'"
                :rules="rules.attr.isList"
              >
                <el-checkbox
                  true-label="1"
                  v-model="scope.row.isList"
                ></el-checkbox>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column property="isQuery" label="查询" width="50">
            <template slot-scope="scope">
              <el-form-item
                :prop="'columns[' + scope.$index + '].isQuery'"
                :rules="rules.attr.isQuery"
              >
                <el-checkbox
                  true-label="1"
                  v-model="scope.row.isQuery"
                ></el-checkbox>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column property="queryType" label="查询方式" width="110">
            <template slot-scope="scope">
              <el-form-item
                :prop="'columns[' + scope.$index + '].value'"
                :rules="rules.attr.queryType"
              >
                <el-select v-model="scope.row.queryType">
                  <el-option label="=" value="EQ" />
                  <el-option label="!=" value="NE" />
                  <el-option label=">" value="GT" />
                  <el-option label=">=" value="GTE" />
                  <el-option label="<" value="LT" />
                  <el-option label="<=" value="LTE" />
                  <el-option label="LIKE" value="LIKE" />
                  <el-option label="BETWEEN" value="BETWEEN" />
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column property="isRequired" label="必填" width="50">
            <template slot-scope="scope">
              <el-form-item
                :prop="'columns[' + scope.$index + '].isRequired'"
                :rules="rules.attr.isRequired"
              >
                <el-checkbox
                  true-label="1"
                  v-model="scope.row.isRequired"
                ></el-checkbox>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column property="htmlType" label="显示类型" width="140">
            <template slot-scope="scope">
              <el-form-item
                :prop="'columns[' + scope.$index + '].htmlType'"
                :rules="rules.attr.htmlType"
              >
                <el-select v-model="scope.row.htmlType">
                  <el-option label="文本框" value="input" />
                <el-option label="文本域" value="textarea" />
                <el-option label="普通下拉框" value="select" />
                <el-option label="动态下拉框" value="select-remote" />
                <el-option label="单选框" value="radio" />
                <el-option label="复选框" value="checkbox" />
                <el-option label="日期控件" value="datetime" />
                <el-option label="图片上传" value="imageUpload" />
                <el-option label="文件上传" value="fileUpload" />
                <el-option label="富文本控件" value="editor" />
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column property="dictType" label="字典类型" width="140">
            <template slot-scope="scope">
              <el-form-item
                :prop="'columns[' + scope.$index + '].dictType'"
                :rules="rules.attr.dictType"
              >
                <el-select
                  v-model="scope.row.dictType"
                  clearable
                  filterable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="dict in dictOptions"
                    :key="dict.dictType"
                    :label="dict.dictName"
                    :value="dict.dictType"
                  >
                    <span style="float: left">{{ dict.dictName }}</span>
                    <span
                      style="float: right; color: #8492a6; font-size: 13px"
                      >{{ dict.dictType }}</span
                    >
                  </el-option>
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column property="remoteField" label="动态属性" width="140">
            <template slot-scope="scope">
              <el-form-item
                :prop="'columns[' + scope.$index + '].remoteField'"
                :rules="rules.attr.remoteField"
              >
                <el-input clearable v-model="scope.row.remoteField"></el-input clearable>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-form-item>
                <el-button
                  type="danger"
                  icon="el-icon-minus"
                  circle
                  @click="handleRemoveAttr(scope.$index)"
                />
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </el-card>
    <div class="footer">
      <el-button
        type="primary"
        v-hasPermi="['tool:diy:code']"
        @click="handleSubmit"
        >生成代码</el-button
      >
    </div>
    <el-dialog
  title="请输入json字段"
  :visible.sync="dialogVisible"
  width="30%">
   <el-input type="textarea" v-model="jsonStr" autosize></el-input>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="handleJson">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
import { titleCase, camelCase } from "@/utils/index";
import { downLoadZipPost } from "@/utils/zipdownload";
import { optionselect as getDictOptionselect } from "@/api/system/dict/type";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { listMenu as getMenuTreeselect } from "@/api/system/menu";
export default {
  name: "HelloWorld",
  components: { Treeselect },
  props: {
    msg: String,
  },
  data() {
    return {
      dialogVisible: false,
      jsonStr:"",
      // 菜单信息
      menus: [],
      form: {
        tableName: undefined,
        tableComment: undefined,
        className: undefined,
        functionAuthor: undefined,
        remark: undefined,
        tplCategory: undefined,
        packageName: undefined,
        moduleName: undefined,
        businessName: undefined,
        functionName: undefined,
        parentMenuId: undefined,
        genType: 0,
        genPath: undefined,
        columns: [],
      },
      rules: {
        tableName: [
          { required: true, message: "请输入表名称", trigger: "blur" },
        ],
        tableComment: [
          { required: true, message: "请输入表描述", trigger: "blur" },
        ],
        className: [
          { required: true, message: "请输入实体类名称", trigger: "blur" },
        ],
        functionAuthor: [
          { required: true, message: "请输入作者", trigger: "blur" },
        ],
        tplCategory: [
          { required: true, message: "请选择生成模板", trigger: "blur" },
        ],
        packageName: [
          { required: true, message: "请输入生成包路径", trigger: "blur" },
        ],
        moduleName: [
          { required: true, message: "请输入生成模块名", trigger: "blur" },
        ],
        businessName: [
          { required: true, message: "请输入生成业务名", trigger: "blur" },
        ],
        functionName: [
          { required: true, message: "请输入生成功能名", trigger: "blur" },
        ],
        attr: {
          columnComment: [
            { required: true, message: "请填写字段中文", trigger: "blur" },
          ],
          javaField: [
            { required: true, message: "请填写java字段", trigger: "blur" },
          ],
          javaType: [
            { required: true, message: "请填写Java字段类型", trigger: "blur" },
          ],
        },
      },
    };
  },
  methods: {
    tabel2Camel() {
      this.form.className = titleCase(camelCase(this.form.tableName));
    },
    /** 转换菜单数据
     * 结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.menuId,
        label: node.menuName,
        children: node.children,
      };
    },
    handleJson(){
    //  console.log(JSON.stringify(this.jsonStr));
    //  let jsonFormat = JSON.stringify(this.jsonStr);
    //  console.log(jsonFormat);
     let json = JSON.parse(this.jsonStr);
     console.log(json);
     for(var index in json){//遍历json数组时，这么写p为索引，0,1
        var column = {};
        column.javaField = index;
        column.javaType = "String";
        column.columnComment = json[index];
        column.isList = "1";
        this.form.columns.push(column);
     }
     this.dialogVisible = false;
    },
    handleAddAttr() {
      this.form.columns.push({});
    },
    handleRemoveAttr(index) {
      this.form.columns.splice(index, 1);
    },
    handleSubmit() {
      // 表单验证
      this.$refs["spuForm"].validate((valid) => {
        if (valid) {
          this.$refs["attrForm"].validate((valid) => {
            if (valid) {
              // 对象深度复制
              // var text = "";
              // text += "{";
              // text += '  "tableName": "model",';
              // text += '  "tableComment": "模型表",';
              // text += '  "className": "Model",';
              // text += '  "functionAuthor": "yuanpingfang",';
              // text += '  "remark": "工作流模型表",';
              // text += '  "tplCategory": "crud",';
              // text += '  "packageName": "com.ruoyi.workflow",';
              // text += '  "moduleName": "workflow",';
              // text += '  "businessName": "model",';
              // text += '  "functionName": "模型管理",';
              // text += '  "parentMenuId": 2015,';
              // text += '  "genType": 0,';
              // text += '  "columns": [';
              // text += "    {";
              // text += '      "javaField": "id",';
              // text += '      "columnComment": "模型编号",';
              // text += '      "javaType": "String",';
              // text += '      "isPk": "1",';
              // text += '      "isList": "1"';
              // text += "    },";
              // text += "    {";
              // text += '      "javaField": "name",';
              // text += '      "columnComment": "名称",';
              // text += '      "javaType": "String",';
              // text += '      "isList": "1",';
              // text += '      "queryType": "LIKE",';
              // text += '      "isQuery": "1",';
              // text += '      "htmlType": "input"';
              // text += "    },";
              // text += "    {";
              // text += '      "javaField": "key",';
              // text += '      "columnComment": "模型KEY",';
              // text += '      "javaType": "String",';
              // text += '      "isList": "1",';
              // text += '      "isQuery": "1",';
              // text += '      "queryType": "EQ",';
              // text += '      "htmlType": "input"';
              // text += "    },";
              // text += "    {";
              // text += '      "javaField": "description",';
              // text += '      "columnComment": "描述",';
              // text += '      "javaType": "String",';
              // text += '      "isList": "1"';
              // text += "    },";
              // text += "    {";
              // text += '      "javaField": "createdBy",';
              // text += '      "columnComment": "创建人",';
              // text += '      "javaType": "String",';
              // text += '      "isList": "1"';
              // text += "    },";
              // text += "    {";
              // text += '      "javaField": "version",';
              // text += '      "columnComment": "版本",';
              // text += '      "isList": "1",';
              // text += '      "javaType": "Long"';
              // text += "    }";
              // text += "  ]";
              // text += "}";

              let data = JSON.parse(JSON.stringify(this.form));
              console.log(data);
              downLoadZipPost("/tool/diy/download", JSON.stringify(this.form));
              // downLoadZipPost("/tool/diy/download", text);
            }
          });
        } else {
          return false;
        }
      });
    },
  },
  created() {
    /** 查询字典下拉列表 */
    getDictOptionselect().then((response) => {
      this.dictOptions = response.data;
    });
    /** 查询菜单下拉列表 */
    getMenuTreeselect().then((response) => {
      this.menus = this.handleTree(response.data, "menuId");
    });
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* .app-container {
  width: 80%;
  margin: 0 auto 50px;
} */
.app-container .box-card {
  margin-top: 20px;
  margin-left: 20px;
}
.app-container .footer {
  /* position: fixed; */
  /* bottom: 20px; */
  /* right: 20px; */
  margin-top: 20px;
  text-align: center;
}

.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.el-table .cell {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-all;
  line-height: 23px;
  /* padding-left: 10px; */
  /* padding-right: 10px; */
  text-align: center;
}
</style>
